<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0">
    <title>离乌人员信息登记</title>
    <meta charset="utf-8">


    <link href="../static/weiui/lib/weui.css" th:href="@{/weiui/lib/weui.css}" rel="stylesheet">
    <link href="../static/weiui/css/jquery-weui.css" th:href="@{/weiui/css/jquery-weui.css}" rel="stylesheet">
    <link href="../static/weiui/css/demos.css" th:href="@{/weiui/css/demos.css}" rel="stylesheet">

    <th:block th:include="include :: header('新增离乌申请数据')"/>
    <th:block th:include="include :: datetimepicker-css"/>
    <style type="text/css">
        iframe{
            width: 100%;
            height: 100%;
        }

        .main-header {
            position: fixed;
            top: 0;
            height: 47px;
            width: 50px;
            background: transparent;
            z-index: 20001;
        }

        .weui-picker-modal {
            width: 100%;
            position: absolute;
            bottom: 0;
            text-align: center;
            border-radius: 0;
            opacity: 0.6;
            height: 15rem;
        }
        .weui-picker-modal .picker-items {
            display: -webkit-box;
            display: -ms-flexbox;
            display: flex;
            -webkit-box-pack: center;
            -ms-flex-pack: center;
            justify-content: center;
            width: 100%;
            padding: 0;
            text-align: right;
            font-size: 2rem;
        }
        .city-picker .picker-items-col {
            -webkit-box-flex: 1;
            -ms-flex: 1;
            flex: 1;
            max-width: 10rem;
        }
        .toolbar .title {
            position: absolute;
            display: block;
            width: 100%;
            padding: 0;
            font-size: 1.85rem;
            font-weight: normal;
            line-height: 0rem;
            color: #3d4145;
            text-align: center;
            white-space: nowrap;
        }
        .toolbar {
            position: relative;
            width: 100%;
            font-size: 1.85rem;
            line-height: 8.5;
            color: #3d4145;
            background: #f7f7f8;
        }
        .toolbar .toolbar-inner {
            height: 3.2rem;
            display: -webkit-box;
            display: -ms-flexbox;
            display: flex;
            text-align: center;
        }
        .toolbar .picker-button {
            position: absolute;
            right: 0;
            box-sizing: border-box;
            height: 2.2rem;
            line-height: 3.2rem;
            color: #04BE02;
            z-index: 1;
            padding: 0 .5rem;
        }
    </style>
    <style>
        .weui-label {
            width: 70px;
        }
    </style>
</head>

<body ontouchstart>

<div class="weui-tab">
    <div class="weui-tab__bd">
        <div id="tab1" class="weui-tab__bd-item weui-tab__bd-item--active">
            <div class="wrapper wrapper-content animated fadeInRight ibox-content">
                <form class="form-horizontal m" id="form-lwsq-add" style="padding-bottom: 35px">
                    <div class="form-group" style="text-align: center;font-size: 20px;font-weight: bold">
                        <span class="col-sm-12 ">离乌人员信息登记</span>
                    </div>
                    <div class="form-group">
                        <label class="col-sm-3 control-label is-required">姓名：</label>
                        <div class="col-sm-8">
                            <input name="xm" minlength="2" class="form-control" placeholder="请输入姓名" type="text"
                                   required>
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-sm-3 control-label">性别：</label>
                        <div class="col-sm-8">
                            <select name="xb" class="form-control "
                                    th:with="type=${@dict.getType('sys_user_sex')}" required>
                                <option th:each="dict : ${type}" th:text="${dict.dictLabel}"
                                        th:value="${dict.dictValue}"></option>
                            </select>
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-sm-3 control-label is-required">年龄：</label>
                        <div class="col-sm-8">
                            <input name="by3" class="form-control" placeholder="请输入年龄" type="number" required>
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-sm-3 control-label">民族：</label>
                        <div class="col-sm-8">
                            <select name="mz" class="form-control" th:with="type=${@dict.getType('b_ry_mz')}" required>
                                <option th:each="dict : ${type}" th:text="${dict.dictLabel}"
                                        th:value="${dict.dictValue}"></option>
                            </select>
                        </div>

                    </div>

                    <div class="form-group">
                        <label class="col-sm-3 control-label">证件名称：</label>
                        <div class="col-sm-8">
                            <select name="zjlx" id="zjlx" class="form-control "
                                    th:with="type=${@dict.getType('b_zjlx')}" required>
                                <option th:each="dict : ${type}" th:text="${dict.dictLabel}"
                                        th:value="${dict.dictValue}"></option>
                            </select>
                        </div>
                    </div>

                    <div class="form-group">
                        <label class="col-sm-3 control-label is-required">证件号码：<span id="zjhmcz"
                                                                                     style="color: #ff0000"></span></label>
                        <div class="col-sm-8">
                            <input name="zjhm" id="zjhm" class="form-control" placeholder="请输入您的证件号码(用于身份核验)"
                                   type="text" required>
                        </div>
                    </div>

                    <div class="form-group">
                        <label class="col-sm-3 control-label is-required">手机号码：</label>
                        <div class="col-sm-8">
                            <input name="sjhm" class="form-control" placeholder="请输入您的手机号码" type="text" required>
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-sm-3 control-label  is-required" for="start">离乌目的地（点击选择）：</label>
                        <div class="col-sm-8">
                            <input  class="form-control" name="fcmdd" id="start" type="text" value="上海 上海市">
                        </div>
                    </div>

                    <div class="form-group">
                        <label class="col-sm-3 control-label is-required">计划离乌时间：</label>
                        <div class="col-sm-8">
                            <div class="input-group date">
                                <input name="yqlwrq"
                                       class="form-control" placeholder="yyyy-MM-dd" type="date" required>
                                <span class="input-group-addon"><i class="fa fa-calendar"></i></span>
                            </div>
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-sm-3 control-label is-required">计划离乌方式：</label>
                        <div class="col-sm-8">
                            <select name="lwfs" class="form-control " style="color: blue"
                                    th:with="type=${@dict.getType('b_jtfs')}" required>
                                <option th:each="dict : ${type}" th:text="${dict.dictLabel}"
                                        th:value="${dict.dictValue}" ></option>
                            </select>
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-sm-3 control-label is-required">离乌事由：</label>
                        <div class="col-sm-8">
                            <select id="lwsy" name="lwsy" class="form-control "
                                    th:with="type=${@dict.getType('b_lwsy')}" required>
                                <option th:each="dict : ${type}" th:text="${dict.dictLabel}"
                                        th:value="${dict.dictValue}"></option>
                            </select>
                        </div>
                    </div>

                    <div class="form-group">
                        <label class="col-sm-3 control-label is-required">入乌日期：</label>
                        <div class="col-sm-8">
                            <div class="input-group date">
                                <input id="rwrq" name="rwrq" class="form-control" placeholder="yyyy-MM-dd" type="date" required>
                                <span class="input-group-addon"><i class="fa fa-calendar"></i></span>
                            </div>
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-sm-3 control-label is-required">在乌居住（滞留）所类型：</label>
                        <div class="col-sm-8">
                            <select onchange="isshowFJH()" id="zzslx" name="zzslx" class="form-control "
                                    th:with="type=${@dict.getType('b_zzslx')}" required>
                                <option th:each="dict : ${type}" th:text="${dict.dictLabel}"
                                        th:value="${dict.dictValue}"></option>
                            </select>
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-sm-3 control-label is-required" id="fjh">入住房间号：</label>
                        <div class="col-sm-8">
                            <input name="by1" class="form-control" placeholder="房间号" type="text">
                        </div>
                    </div>

                    <div class="form-group">
                        <label class="col-sm-3 control-label is-required">在乌居住（滞留）详细地址/隔离点：</label>
                        <div class="col-sm-8">
                            <textarea id="xxdz" name="xxdz" class="form-control" rows="3"
                                      placeholder="如宾馆/酒店名称/住所所在道路、门牌号、小区、楼栋号、单元室等" required></textarea>
                            <a href="javascript:;" class=" open-popup" style="float:right;display:" data-target="#tab3">详细地址搜索</a>
                        </div>
                    </div>


                    <hr/>

                    <div class="form-group">
                        <label class="col-sm-3 control-label is-required">在乌居住（滞留）地所属社区</label>
                    </div>

                    <div id="element1" class="row">
                        <div class="col-sm-2">
                            <select id="quyu" class="quyu form-control m-b" data-first-title="选择区域">
                                <option value="">请选择</option>
                                <option value="天山区" selected>天山区</option>
                            </select>
                        </div>
                        <div class="col-sm-2">
                            <select id="jiedao" class="jiedao form-control m-b" data-first-title="选择街道管委会">
                                <option value="燕儿窝街道" selected>燕儿窝街道</option>
                            </select>
                        </div>
                        <div class="col-sm-2">
                            <select id="shequ" class="shequ form-control m-b" data-first-title="选择社区">
                                <option value="红雁池社区" selected>红雁池社区</option>
                            </select>
                        </div>
                    </div>


                    <div class="form-group">
                        <label class="col-sm-3 control-label is-required">是否有7日内核酸检测报告（阴性）：</label>
                        <div class="col-sm-8">
                            <select name="hsjc" class="form-control m-b" th:with="type=${@dict.getType('sys_yes_no')}" required>
                                <option value=""></option>
                                <option th:each="dict : ${type}" th:text="${dict.dictLabel}" th:value="${dict.dictValue}" ></option>
                            </select>
                        </div>
                    </div>


                    <div class="form-group">
                        <label class="col-sm-3 control-label is-required">近3天是否有发热、咳嗽等症状：</label>
                        <div class="col-sm-8">
                            <select name="styc" class="form-control "
                                    th:with="type=${@dict.getType('sys_yes_no')}" required>
                                <option value=""></option>
                                <option th:each="dict : ${type}" th:text="${dict.dictLabel}"
                                        th:value="${dict.dictValue}"></option>
                            </select>
                        </div>
                    </div>




                    <input name="sqName" id="sqName" type="hidden"/>
                    <input name="sqCode" id="sqCode" type="hidden"/>
                    <input name="id" id="id" type="hidden"/>
                    <input name="by2" id="by2" type="hidden"/>
                    <input name="by5" id="by5" type="hidden"/>
                    <input name="by6" id="by6" type="hidden"/>
                    <input name="by8" id="by8" type="hidden" th:value="*{uid}"/>


                    <div class="form-group">
                        <div class="col-sm-8">
                            <div class="input-group date">
                                <input name="ck" id="ck" type="checkbox" checked>本人承诺:以上所填写内容真实,完整,
                                如有虚假,由本人承担一切责任!
                            </div>
                        </div>
                    </div>


                    <hr/>

                    <div class="col-md-12">
                        <div class="form-group">
                            <div class="col-sm-12 " style="text-align: center;">
                                <button id="bottonsubmit" type="button" onclick="submitHandler()"
                                        class="btn btn-primary">提交
                                </button>
                                <button onclick="javascript:history.go(-1);" class="btn btn-danger" type="button">关闭
                                </button>
                                <!--<button onclick="modalClose();" class="btn btn-danger" type="button">关闭</button>-->
                            </div>
                        </div>
                    </div>

                </form>
            </div>

        </div>

        <div id="tab3" class='weui-popup__container' >

            <div class="wrapper wrapper-content animated fadeInRight ibox-content" style="padding: 0px;height: inherit">
                <div class="main-header">

                </div>
                <iframe id="test" src='https://m.amap.com/picker/?keywords=宾馆,小区,学校&center=87.527648,43.840154&zoom=16&key=b87a9d678230dbc20c41b22eac54f95c'></iframe>
                <script>
                    (function(){
                        var iframe = document.getElementById('test').contentWindow;
                        document.getElementById('test').onload = function(){
                            iframe.postMessage('hello','https://m.amap.com/picker/');
                        };
                        window.addEventListener("message", function(e){
                            $("#xxdz").val(e.data.name+'--'+e.data.address)
                            $("#by5").val(e.data.location)
                            $("#tab3").css("display", "none");
                        }, false);

                    }())
                </script>
            </div>
        </div>

        <div id="tab4" class="weui-tab__bd-item">
            <div class="wrapper wrapper-content animated fadeInRight ibox-content">
                <form class="form-horizontal m" id="form-lwsq-chaxun" style="padding-bottom: 35px">
                    <div class="form-group" style="text-align: center;font-size: 16px;font-weight: bold">
                        <span class="col-sm-12 ">个人离乌申请状态查询</span>
                    </div>

                    <div class="col-md-12">
                        <div class="form-group">
                            <label class="col-sm-3 control-label">手机号：</label>
                            <div class="col-sm-9">
                                <input type="text" minlength="11" maxlength="11" name="findtel" id="findtel"
                                       class="form-control" placeholder="请输入手机号码">
                            </div>
                        </div>
                    </div>

                    <div class="col-md-12">
                        <div class="form-group">
                            <div class="col-sm-12">
                                <span id="findresult" style="font-weight: bold;font-size: 14px;color: red"></span>
                            </div>
                        </div>
                    </div>

                    <div class="col-md-12">
                        <div class="form-group">
                            <div class="col-sm-12 " style="text-align: center;">
                                <button type="button" onclick="jcsubmitHandler()" class="btn btn-primary">查询</button>
                            </div>
                        </div>
                    </div>

                </form>
            </div>
        </div>
    </div>

    <div class="weui-tabbar">
        <a href="#tab1" class="weui-tabbar__item weui-bar__item--on">
            <div class="weui-tabbar__icon">
                <img src="../weiui/images/icon_nav_msg.png" alt="">
            </div>
            <p class="weui-tabbar__label">信息填报</p>
        </a>

        <a href="#tab4" class="weui-tabbar__item">
            <div class="weui-tabbar__icon">
                <img src="./weiui/images/icon_nav_cell.png" alt="">
            </div>
            <p class="weui-tabbar__label">查询</p>
        </a>
    </div>
</div>
<script src="../static/js/xj.city.js" th:src="@{/js/xj.city.js}"></script>
<script src="../static/weiui/lib/jquery-2.1.4.js" th:src="@{/weiui/lib/jquery-2.1.4.js}"></script>
<script src="../static/weiui/lib/fastclick.js" th:src="@{/weiui/lib/fastclick.js}"></script>
<script src="../static/weiui/js/jquery-weui.js" th:src="@{/weiui/js/jquery-weui.js}"></script>
<script src="https://webapi.amap.com/maps?v=1.4.15&key=b87a9d678230dbc20c41b22eac54f95c"></script>

<script src="../static/weiui/js/city-picker.js?v=1" th:src="@{/weiui/js/city-picker.js?v=123}"></script>
<script>
    $("#start").cityPicker({
        title: "选择离乌目的地",
        showDistrict: false
    });

</script>
<th:block th:include="include :: footer"/>
<th:block th:include="include :: datetimepicker-js"/>
<th:block th:include="include :: jquery-cxselect-js"/>

<script th:inline="javascript">
    $(".main-header").click(function () {
        $("#tab3").css("display", "none");
    });

    var prefix = ctx + "api/lwsq/lwsq"
    $("#form-lwsq-add").validate({
        rules: {
            focusCleanup: true,
            zjhm: {
                required: true,
                isIdentity: true
            },
            sjhm: {
                isPhone: true
            }
        },
    });


    function submitHandler() {
        if ($("#shequ").val() == "" || $("#shequ").val() == null) {
            $.modal.alertWarning("请选择所属社区！便于社区人员联系")
            return
        }
        if ($.validate.form()) {
            $("#by2").val($("#lwsy").find("option:selected").text())
            $("#sqName").val($("#shequ").find("option:selected").text())
            $("#sqCode").val($("#shequ").find("option:selected").val())
            $.operate.post(prefix + "/add", $('#form-lwsq-add').serialize(), saveCallback);
        }
    }

    //保存提交回调函数，保存成功后拿到id，继续提交做修改
    function saveCallback(index, msg) {
        if (index.code == 0) {
            $("#id").val(index.data)
        }
    }

    function jcsubmitHandler() {
        if ($("#findtel").val()) {
            $.operate.get(prefix + "/findByTel?tel=" + $('#findtel').val(), callb);
        } else {
            $.modal.alertWarning("无手机号码查不到！")
        }
    }

    function callb(index) {
        if (index.code == 0) {
            $("#findresult").html(index.data)
        }
        if (index.code == 500) {
            $("#findresult").html('请检查手机号是否输入错误，未查到数据！');
        }
    }

    function isshowFJH() {
        if ($("#zzslx").val() == "jd" || $("#zzslx").val() == "xx") {
            $("#fjh").html('入住房间号')
            //$("#fjh").css("display", "");
        } else {
            $("#fjh").html('楼栋/单元/房号')
            //$("#fjh").css("display", "none");
        }
    }

    $(function () {
        $(".fa-calendar").closest('.input-group-addon').click(function () {
            $(this).prev().datetimepicker('show');
        })
        //证件类型
        $("#zjlx").change(function () {
            $.validate.reset();
            var type = $("#zjlx").find("option:selected").val();
            if ("sfz" == type) {
                $("#zjhm").rules("remove");
                $("#zjhm").rules("add", {required: true, isIdentity: true, messages: {required: "请正确输入您的身份证号码"}});
            } else {
                $("input[name=zjhm]").rules("remove");
                $("#zjhm").rules("add", {required: true, messages: {required: "必填项，不能跳过"}});
                $("#zjhm").attr("placeholder","请填写证件号码");
            }
        });
        regeocoder();
    });

    $("input[name='shclsj']").datetimepicker({
        format: "yyyy-mm-dd",
        minView: "month",
        autoclose: true
    });


    $("input[name='rwrq']").datetimepicker({
        format: "yyyy-mm-dd",
        minView: "month",
        autoclose: true
    });

    $("input[name='rwrq']").change(function () {
        var thetime = $(this).val();
        var d = new Date(Date.parse(thetime.replace(/-/g, "/")));
        var curDate = new Date();
        if (d > curDate) {
            $.modal.alertWarning("请选择正确的入乌日期！！")
            $(this).val("");
            $(this).focus();
        }
    });

    $("input[name='yqlwrq']").change(function () {
        var thetime = $(this).val();
        var d = new Date(Date.parse(thetime.replace(/-/g, "/")));
        var curDate = new Date();
        if (d < curDate) {
            $.modal.alertWarning("请选择正确的离乌日期！！")
            $(this).val("");
            $(this).focus();
        }
    });

    $("input[name='yqlwrq']").datetimepicker({
        format: "yyyy-mm-dd",
        minView: "month",
        autoclose: true
    });

    layui.use('laydate', function () {
        var laydate = layui.laydate;

        laydate.render({
            elem: '#by4',
            type: 'datetime',
            trigger: 'click'
        });
    });

    var data = init_xj_city_picker;

    $('#element1').cxSelect({
        selects: ['quyu', 'jiedao', 'shequ'],
        jsonName: 'name',
        jsonValue: 'code',
        jsonSub: 'children',
        data: data
    });


</script>

<script type="text/javascript">

    function regeocoder() {

        AMap.plugin('AMap.Geolocation', function() {
            var geolocation = new AMap.Geolocation({
                enableHighAccuracy: true,//是否使用高精度定位，默认:true
                timeout: 10000,          //超过10秒后停止定位，默认：5s
                buttonPosition:'RB',    //定位按钮的停靠位置
                buttonOffset: new AMap.Pixel(10, 20),//定位按钮与设置的停靠位置的偏移量，默认：Pixel(10, 20)
                zoomToAccuracy: true,   //定位成功后是否自动调整地图视野到定位点

            });
            geolocation.getCurrentPosition(function(status,result){
                if(status=='complete'){
                    onComplete(result)
                }
            });
        });
        //解析定位结果
        function onComplete(data) {
            $("#xxdz").val(data.formattedAddress)
            $("#by5").val(data.position.lng+','+data.position.lat)
            $("#by6").val()
        }
    }

</script>


</body>
</html>
